<template>
  <div class="sample-components-general">
    <a-card title="字典" :bordered="false">
      <p>根据后端设置的字典数据封装了字典相关的Select、Radio、Checkbox和Tag组件</p>
      <a-form-model
        ref="form"
        :label-col="FORM_LAYOUT.labelCol"
        :wrapper-col="FORM_LAYOUT.wrapperCol">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="Select">
              <e-dict-select v-model="sex" type="sex"/>
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="Select 多选">
              <e-dict-select v-model="sexArray" mode="multiple" type="sex"/>
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="Radio">
              <e-dict-radio v-model="sex" type="sex"/>
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="Checkbox">
              <e-dict-checkbox v-model="sexArray" type="sex"/>
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="Tags">
              <e-dict-tag type="sex" code="1"/>
              <e-dict-tag type="sex" code="2"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import { FORM_LAYOUT, FULL_FORM_LAYOUT } from '@/utils/const/form'
import EDictSelect from '@/components/Easy/data-entry/DictSelect'
import EDictRadio from '@/components/Easy/data-entry/DictRadio'
import EDictCheckbox from '@/components/Easy/data-entry/DictCheckbox'
import EDictTag from '@/components/Easy/data-display/DictTag'

export default {
  name: 'SampleComponentsDataEntryDict',
  components: { EDictTag, EDictCheckbox, EDictRadio, EDictSelect },
  data () {
    return {
      FULL_FORM_LAYOUT: FULL_FORM_LAYOUT,
      FORM_LAYOUT: FORM_LAYOUT,
      sex: '1',
      sexArray: ['1', '2']
    }
  },
  mounted () {

  }
}
</script>

<style scoped>

</style>
